<template>
  <view class="custom-tabbar">
    <!-- 首页 -->
    <view class="tab-item" @click="switchTab(0, '/pages/index/index')">
      <image src="/static/icons/home.png" class="tab-icon" />
      <text :class="{active: current === 0}">首页</text>
    </view>
    
    <!-- 中间突起的拍照按钮 -->
    <view class="camera-tab" @click="openCamera">
      <view class="camera-icon-wrapper">
        <image src="/static/icons/camera.png" class="camera-icon" />
      </view> 
    </view>
    
    <!-- 我的 -->
    <view class="tab-item" @click="switchTab(1, '/pages/my/my')">  <!-- 修改为1和正确路径 -->
      <image src="/static/icons/my.png" class="tab-icon" />
      <text :class="{active: current === 1}">我的</text>  <!-- 修改为1 -->
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  current: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['change'])

const switchTab = (index, url) => {
  if (props.current === index) return;
  emit('change', index);
  uni.switchTab({ url });
};

const openCamera = () => {
  uni.navigateTo({ url: '/pages/camera/index' });
};
</script>

<style lang="scss">
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.tab-icon {
  width: 48rpx;
  height: 48rpx;
}

.tab-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.tab-text.active {
  color: #007aff; /* 选中状态文字颜色（蓝色） */
}

/* 相机按钮样式（凸起效果） */
.camera-tab {
  position: relative;
  bottom: 65rpx; /* 凸起高度 */
  width: 100rpx;
  height: 100rpx;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.camera-icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.camera-icon {
  width: 75rpx;
  height: 75rpx;
}
</style>